<template>
  <div class="assetsm">
    <vheader pageTitle="资产管理" backUrl="/mine"></vheader>
    <no-data v-show="!isHavaData">暂无数据哦~</no-data>
    <ul 
      class="assetsm-content" 
      v-show="isHavaData"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10">
      <li class="border-1px" v-for="(item, index) in dataList">
        <div>
          <p>{{ item.borrowInfo.borrowName }}</p>
          <span class="border-all-1px" @click="topaymentDetail(item.id, item.borrowInfo.borrowName)" v-if="item.borrowInfo.borrowStatus > 5">回款明细</span>
          <span class="border-all-1px" v-else @click="clickPrompt">认购中</span>
        </div>
        <ul>
          <li>
            <p>{{ item.investMoney.toFixed(2) }}</p>
            <span>出借金额</span>
          </li>
          <li>
            <p>{{ item.investorInterest.toFixed(2) }}</p>
            <span>利息</span>
          </li>
          <li>
            <p>{{ item.borrowInfo.awardTotalRate }}%</p>
            <span>借款利率</span>
          </li>
        </ul>
      </li>
      <div v-show="!allLoaded"  id="assetsm-loading">
        <mint-spinner :type="3"></mint-spinner>
      </div>
      <li>
        <p v-if="allLoaded">没有更多数据~</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import noData from 'components/common/noData'
  import vheader from 'components/common/comHead'
  import { Spinner, Toast } from 'mint-ui'

  export default {
    data () {
      return {
        isHavaData: true,
        loading: false,
        pageOffset: 1,
        pageSize: 10,
        totalPage: 1,
        dataList: [],
        allLoaded: false
      }
    },
    methods: {
      loadMore () {
        if (this.allLoaded) {
          return
        }
        this.loading = true
        const userAcctKey = this.$cookie.get('acctKey')
        this.$http.get(`/api/member/assets?acctKey=${userAcctKey}&numPerPage=${this.pageSize}&currentPage=${this.pageOffset}`)
          .then((res) => {
            if (res.data.success) {
              this.pageOffset = res.data.data.currentPage
              this.totalPage = res.data.data.totalPage
              this.loading = false
              res.data.data.list.forEach((item) => {
                this.dataList.push(item)
              })
              if (this.pageOffset === this.totalPage || this.totalPage === 0) {
                this.allLoaded = true
                return
              }
              this.pageOffset++
            } else {
              this.isHavaData = false
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      topaymentDetail (id, name) {
        this.$router.push(`/paymentDetail/${name}/${id}`)
      },
      clickPrompt () {
        Toast('正在认购中，您出借的金额可能被退回')
      }
    },
    components: {
      noData,
      vheader,
      mintSpinner: Spinner
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .assetsm {
    &-content {
      &>li {
        @include border-1px(#{$base-e5e5e5});
        padding-bottom: 30px;
        margin: 0 30px;
        &:last-child {
          margin-top: 30px;
          &:after {
            display: none;
          }
          p {
            text-align: center;
            font-size: 30px;
            color: $base-999;
          }
        }
        &>div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 30px 0 46px 0;
          font-size: 32px;
          color: $base-666;
          span {
            display: inline-block;
            height: 46px;
            width: 130px;
            line-height: 54px;
            text-align: center;
            font-size: 28px;
            color: $base-3fadf9;
            @include border-all-1px(#{$base-3fadf9})
          }
        }
        &>ul {
          display: flex;
          justify-content: space-around;
          font-size: 34px;
          text-align: center;
          p {
            color: $base-ff6c00;
            margin-bottom: 20px;
          }
          span {
            font-size: 26px;
            color: $base-999;
          }
        }
      }
    }
    #assetsm-loading {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
